@charset "utf-8";
@import './_reset';
@function r($px){
	@return $px/50px *1rem;
}

html,body{
	width: 100%;
	height: 100%;
}
.web{
	height: 100%;
	width: 100%	;
	position: relative;
}
header{
	text-align: center;
	width: 100%;
	height: r(89px);
	background-color:#b20000;
	position: fixed;
	top: 0;
	left: 0;
	.left_logo{
		// background-color: #CCCCCC;
		margin-top: r(33px);
		margin-left: r(23px);
		img{
			width: r(31px);
			height: r(24px);
		}
	}
	.middle_logo{
			display: inline-block;
			width: r(264px);
			height: r(40px);
			margin-top: r(23px);
			// background-color: #CCCCCC;
			img{
				width: 100%;
				height: 100%;
			}
		}
	.search_logo{
		margin-right: r(17px);
		margin-top: r(23px);
		img{
			width: r(42px);
			height: r(42px);
		}
	}
}

section{
	overflow: auto;
	// background-color:#f5f5f5;
	// margin-top: r(89px);
	position: fixed;
	top:r(89px);
	bottom:r(96px);
	left: 0;
	right: 0;
	>.ali{
		font-size: 0;
		img{
			width: 100%;
			height: r(53px);
		}
	}
	>.bg{
		font-size: 0;
		img{
		width: 100%;
		height: r(304px);
		}
	}
	>.content_1{
		height: r(337px);
		width: 100%;
		// background-color: #0C9B9D;
		>.box1{
			height: r(118px);
			width: r(581px);
			margin-top: r(25px);
			margin-left: r(25px);
			padding-bottom: r(23px);
			border-bottom: r(1px) solid #e2e2e2;
			>.box1_left{
				
				width: r(324px);
				>p{
					font-size: r(25px);
					font-family: "microsoft yahei";
					width:100%;
					height: r(59px);
					// letter-spacing: r(2px);
					margin-bottom: r(27px);
				}
				.sp{
					color: #c5c5c5;
					width: r(324px);
					height: r(22px);
					.icon-aixin{
						font-size: r(18px);
						display:inline-block;
						// text-align: left;
					}
					.span_2{
						font-family: "microsoft yahei";
						display: inline-block;
						text-align: right;
						width: r(260px);
					}
				}
			}
		>img{
			width: r(208px);
			height:r(116px) ;
			}
		}
		>.box2{
			height: r(118px);
			width: r(581px);
			margin-top: r(25px);
			margin-left: r(25px);
			padding-bottom: r(23px);
			// border-bottom: r(1px) solid #e2e2e2;
			>.box2_left{
				
				width: r(324px);
				>p{
					font-size: r(25px);
					font-family: "microsoft yahei";
					width:100%;
					height: r(59px);
					// letter-spacing: r(2px);
					margin-bottom: r(27px);
				}
				.sp{
					color: #c5c5c5;
					width: r(324px);
					height: r(22px);
					.icon-aixin{
						font-size: r(18px);
						display:inline-block;
						// text-align: left;
					}
					.span_2{
						font-family: "microsoft yahei";
						display: inline-block;
						text-align: right;
						width: r(260px);
					}
				}
			}
		>img{
			width: r(208px);
			height:r(116px) ;
			}
		}
	}
	>.huise{
		width: r(640px);
		height: r(26px);
		background-color: #f5f5f5;
	}
	>.content_2{
		text-align: center;
		width: 100%;
		height: r(282px);
		>p{
			font-size: r(25px);
			font-family: "microsoft yahei";
			text-align: left;
			height: r(78px);
			line-height: r(78px);
			margin-left: r(25px);
		}
		>.box_center{
				
			>img{
				width: r(188px);
				height: r(123px);
			}
		}
		>.box_bottom{
			color:#c5c5c5;
			height: r(50px);
			line-height: r(50px);
			
			>.bottom_img{
				width: r(30px);
				height: r(17px);
				margin-left: r(20px);
			}	
			>.bottom_span{
				display: inline-block;
				width:r(80px);
				font-size: r(20px);
				margin-left:r(10px);
			}
			>.icon-yuyinspeech98{
				width: r(80px);
				font-size: r(16px);
				
			}
			>.icon-aixin{
				font-size: r(16px);
			}
			>.bottom_span1{
				font-family: "microsoft yahei";
				display: inline-block;
				text-align: right;
				width: r(300px);
			}
			}
		}
	}

footer{
	height: r(96px);
	width: 100%;
	position: fixed;
	bottom: 0;
	left: 0;
	background-color: #f5f5f5;
	>ul{
		text-align: center;
		>li{
		 width: 20%;
		 float: left;
		 margin-top: r(20px);
			img{
				height: r(41px);
				width: r(41px);
			}
			p{
				font-size: r(12px);
				color: #939393;
			}
			
	 }
}
}

#leftbox{
	position: absolute;
	left: 0;
	bottom: 100px;
	z-index: 100;
}

#leftbox:checked~.web_left{
	transform: translateX(0%);
	
}
.web_left{
	transform: translateX(-100%);
	width: 100%;
	height: 100%;
	background-color: #ccc;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	transition: all 2s;
}

